angular.module('fs.waf').controller('poi.demo.fsCustomerSelectController', [
  '$scope',
  '$q',
  function($scope, $q) {
    var ctrl = this;

    ctrl.ngModel = {};

    ctrl.layoutConfig = {
      demo: {
        name: 'demo',
        gridGroups: [
          {
            grids: ['edit', 'readonly', 'view']
          },
          {
            grids: ['subItems','has_filter']
          }
        ],
        gridConfigs: {
          valueText: {
            name: 'text',
            label: 'value',
            size: 2,
            type: 'text',
            model: 'textValue',
            appScope: $scope,
            showStyle: 'edit',
            tooltip: 'value'
          },
          displayText: {
            name: 'text',
            label: 'display',
            size: 2,
            type: 'text',
            model: 'displayText',
            appScope: $scope,
            showStyle: 'edit',
            tooltip: 'display',
            uppercase: false
          },
          changeData: {
            name: 'button',
            label: 'changeData',
            size: 2,
            type: 'button',
            appScope: $scope,
            text: 'Add Data',
            tooltip: 'button tooltip',
            options: {
              icon: 'setup',
              showIcon: false,
              callback: {
                click: 'vm.changeData'
              }
              // hotKey: 'alt+1'
            }
          },
          edit: {
            name: 'customer-select',
            label: 'edit',
            size: 4,
            type: 'customer-select',
            model: 'customerSelectValue',
            appScope: $scope,
            template: 'normal',

            showStyle: 'edit',

            placeholder: 'customer-select',
            tooltip: 'customer-select',

            // format: 'defaultMoney',
            // filter: '',

            options: {
              scrollable: true,
              maxHeight: 100,
              hasEmptyOption: false,
              filterable: false,
              // filter: {
              //   model: 'value',
              //   uppercase: true,
              //   type: 'text',
              //   options: {
              //     callback: 'changedFunc'
              //   }
              // },
              callback: {
                changed: 'changedFunc'
              },
              data: 'vm.normalData'
            }
          },
          readonly: {
            name: 'customer-select',
            label: 'readonly',
            size: 4,
            type: 'customer-select',
            model: 'customerSelectValue',
            appScope: $scope,
            template: 'normal',

            showStyle: 'readonly',

            placeholder: 'customer-select',
            tooltip: 'customer-select',

            // format: 'defaultMoney',
            // filter: '',

            options: {
              scrollable: true,
              maxHeight: 100,
              hasEmptyOption: false,
              filterable: false,
              callback: {
                changed: 'changedFunc'
              },
              data: 'vm.normalData'
            }
          },
          view: {
            name: 'customer-select',
            label: 'view',
            size: 4,
            type: 'customer-select',
            model: 'customerSelectValue',
            appScope: $scope,
            template: 'normal',

            showStyle: 'view',

            placeholder: 'customer-select',
            tooltip: 'customer-select',

            // format: 'defaultMoney',
            // filter: '',

            options: {
              scrollable: true,
              maxHeight: 100,
              hasEmptyOption: false,
              filterable: false,
              callback: {
                changed: 'changedFunc'
              },
              data: 'vm.normalData'
            }
          },
          subItems: {
            name: 'customer-select',
            label: 'subItems',
            size: 4,
            type: 'customer-select',
            model: 'customerSelectValue1',
            appScope: $scope,
            template: 'company',

            showStyle: 'edit',

            placeholder: 'customer-select',
            tooltip: 'customer-select',

            options: {
              scrollable: false,
              hasEmptyOption: false,
              filterable: false,
              data: 'vm.subItems'
            }
          },
          has_filter: {
            name: 'customer-select',
            label: 'has_filter',
            size: 4,
            type: 'customer-select',
            model: 'customerSelectValue',
            appScope: $scope,
            template: 'normal',

            showStyle: 'edit',

            placeholder: 'customer-select',
            tooltip: 'customer-select',

            // format: 'defaultMoney',
            // filter: '',

            options: {
              scrollable: true,
              maxHeight: 100,
              hasEmptyOption: false,
              filterable: true,
              // filter: {
              //   model: 'value',
              //   uppercase: true,
              //   type: 'text',
              //   options: {
              //     callback: 'clickFun'
              //   }
              // },
              data: 'vm.normalData'
            }
          },
        }
      }
    };

    ctrl.options = {};

    ctrl.subItems = [
      {
        label: 'Jack',
        value: 123,
        subItems: [
          {
            label: 'Jack1-1',
            value: 1231
          },
          {
            label: 'Lee1-2',
            value: 1232
          }
        ]
      },
      {
        label: 'Lee',
        value: 456,
        subItems: [
          {
            label: 'Jack1-1',
            value: 4561
          },
          {
            label: 'Lee1-2',
            value: 4562
          }
        ]
      }
    ];

    ctrl.normalData = [
      {
        label: 'Jack',
        value: 123
      },
      {
        label: 'Lee',
        value: 456
      },
      {
        label: 'Jack1',
        value: 1231
      },
      {
        label: 'Lee1',
        value: 4561
      },
      {
        label: 'Jack12',
        value: 12312
      },
      {
        label: 'Lee12',
        value: 45612
      },
      {
        label: 'Jack123',
        value: 123123
      },
      {
        label: 'Lee123',
        value: 456123
      }
    ];

    ctrl.componentStyle = [
      {
        value: 'edit',
        label: 'edit'
      },
      {
        value: 'readonly',
        label: 'readonly'
      },
      {
        value: 'view',
        label: 'view'
      }
    ];

    ctrl.changeData = function() {
      if (ctrl.ngModel.textValue && ctrl.ngModel.displayText) {
        ctrl.normalData.push({
          value: ctrl.ngModel.textValue,
          label: ctrl.ngModel.displayText
        });
      }
    };

    ctrl.clickFun = function() {
      console.log(ctrl.ngModel.linkValue);
    };
  }
]);
